<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .slider-bar {
            position: absolute;
            left: 50%;
            top: 300px;
            margin-left: 600px;
            width: 45px;
            height: 130px;
            background-color: pink;
        }
        
        .w {
            width: 1200px;
            margin: 10px auto;
        }
        
        .header {
            height: 150px;
            background-color: purple;
        }
        
        .banner {
            height: 250px;
            background-color: skyblue;
        }
        
        .main {
            height: 1000px;
            background-color: yellowgreen;
        }
        
        span {
            display: none;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="slider-bar">
        <span class="goBack">返回顶部</span>
    </div>
    <div class="header w">
        头部区域
    </div>
    <div class="banner w">
        banner区域
    </div>
    <div class="main w">
        主体部位
    </div>
    
    <script>
        var sliderbar = document.querySelector('.slider-bar');
        var banner = document.querySelector('.banner');
        var bannerTop = banner.offsetTop; //被卷曲的大小一直改变，所以应该写在滚动的外面
        var sliderbarTop = sliderbar.offsetTop - bannerTop;
        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack');
        var mainTop = main.offsetTop;
        /*1. 原先侧边栏是据对定位
            2. 当页面滚动到一定位置，侧边栏改为固定单位
            3.页面继续滚动，会让返回顶部显示出来*/
        //1.用到页面滚动事件scroll ，事件源为document
        document.addEventListener('scroll',function(){
        //2. 滚动到某个位置，就是判断页面被卷去的上部值
        //3. 页面被卷去的内容用  window.pageYOffset 获得 
            // window.pageYOffset
            //当页面被卷去的页面大于172 侧边栏就需要改为固定定位
            if(window.pageYOffset >= bannerTop){
                sliderbar.style.position = 'fixed';
                sliderbar.style.top = sliderbarTop + 'px';
            }else{
                sliderbar.style.position = 'absolute';
                sliderbar.style.top = '300px';
            }
            //当页面滚动到main盒子，就显示goback模块
            if(window.pageYOffset >=mainTop){
                goBack.style.display = 'block';
            }else{
                goBack.style.display = 'none';
            }
        })
        //滚动到窗口至文档的特定位置 window.scroll(x,y)  里面的x， y不加单位
        goBack.addEventListener('click',function(){
            animate(window,0);
        });

        //垂直相关的缓动动画  页面滚动  window.pageYOffset
        function animate(obj,target,callback){
            //callback = function(){} 调用的时候 就再定时器结束的时候调用callback();
            clearInterval(obj.timer);
            obj.timer  = setInterval(function(){
                //每次加1 ， 这个步长值改为一个慢慢变小的值
                //步长公式：(目标值-现在的位置)
                //把步长值改为整数 往上取整 
                // var step = Math.ceil((target - obj.offsetLeft)/10);
                //为了判断是取正的整数值，还是取负的整数zhi
                var step =  (target - window.pageYOffset)/10;
                if(step >= 0){
                    step = Math.ceil(step);
                }else{
                    step = Math.floor(step);
                }
                if(window.pageYOffset == target){
                    clearInterval(obj.timer);
                    //回调函数下入定时器结束里面
                    if(callback){
                        callback();
                    }
                }
                // obj.style.left = obj.offsetLeft + step + 'px';
                window.scroll(0,window.pageYOffset+step)
            },15)
        }
    </script>
</body>
</html>